<template>
    <el-dialog
            :visible.sync="dialogVisible"
            width="400px"
            :before-close="closeDialog"
            append-to-body
            title="添加角色"
    >
    
    
        <el-form  :label-position="labelPosition"  label-width="70px" ref="form" :model="form"  v-loading="loading">
            <el-form-item prop="className" label="角色类别">
                <el-input size= "small" disabled type="text"  v-model="form.className"></el-input>
            </el-form-item>
            <el-form-item prop="roleCode" label="角色编码">
                <el-input size= "small" type="text" placeholder="请输入角色编码" v-model="form.roleCode"></el-input>
            </el-form-item>
            <el-form-item prop="roleName" label="角色名称">
                <el-input size= "small" type="text" placeholder="请输入角色名称" v-model="form.roleName"></el-input>
            </el-form-item>
            <el-form-item prop="roleNickName" label="角色别名">
                <el-input size= "small" type="text" placeholder="请输入角色别名" v-model="form.roleNickName"></el-input>
            </el-form-item>
            <el-form-item prop="remark" label="备注">
                <el-input size= "small" type="text" v-model="form.remark"></el-input>
            </el-form-item>
        </el-form>
        
        <div class="btn-group">
            <el-button type="text" size="small" plain @click="closeDialog">取消</el-button>
            <el-button type="primary"  size="small" :disabled="loading" @click="submit">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>

    import {addRole} from '@/api/role';
    export default {
        data(){
            return {
                labelPosition:'right',
                dialogVisible: false,
                loading: false,
                form: {
                    classId:"",
                    className:"",
                    roleCode:"",
                    roleName:"",
                    roleNickName:"",
                    remark:""
                },
            }
        },
        created(){

        },
        methods:{
            showDialog(row){
                this.dialogVisible = true
                this.form.classId = row.classId;
                this.form.className = row.className;
            },
            closeDialog(){
                this.form = {}
                this.dialogVisible = false
                this.loading = false
            },

            submit(){
                this.$refs.form.validate(async valid => {
                    if(valid){
                        try{
                            this.loading = true
                            let res = await addRole(this.form);
                            if(res.status == '200'){
                                this.$message.success('添加成功')
                                this.closeDialog()
                                this.$emit('success')
                            }else{
                                this.$message.error(res.message)
                                this.loading = false
                            }
                        }catch{
                            this.loading = false
                        }
                    }
                });
            }
        }
    }
</script>
<style lang="scss" scoped>
    .btn-group{
        display: flex;
        justify-content: right;
        .el-button{
            width: 50px;
        }
    }
    .el-form-item{
        height: 40px;
    }
</style>